<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>收银台</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="content_bg" style="padding-bottom: 0;">
				<view class="content_title">基础费用</view>
				<view class="infor_item flex align-center justify-between"
					:class="index == basic_expenses.length - 1 ? 'no_line' : ''"
					v-for="(item, index) in basic_expenses">
					<view class="infor_item_le_1">{{item.name}}</view>
					<view class="infor_item_ri_1">
						<view style="flex: 1;font-size: 30rpx;text-align: right;">{{Number(item.price)}}</view>
						<!-- <input v-model="item.price" :disabled="true" style="flex: 1;font-size: 30rpx;text-align: right;" type="number" maxlength="10000" @blur="countPrice">
						<u-icon style="margin-left: 24rpx;" name="close" size="26" color="#999999" @click="clearPrice(2)"></u-icon> -->
					</view>
				</view>
			</view>
			<view class="content_bg">
				<view class="content_title">其他费用</view>
				<view class="infor_item flex align-center justify-between" v-for="(item, index) in payMentList">
					<view class="infor_item_le_1">{{item.name}}</view>
					<view class="infor_item_ri_1">
						<!-- <view style="flex: 1;font-size: 30rpx;text-align: right;">{{Number(item.price)}}</view> -->
						<input v-model="item.price" :disabled="true" style="flex: 1;font-size: 30rpx;text-align: right;"
							type="number" maxlength="10000">
						<template v-if="detailsInfo.status < 3">
							<template v-if="item.insure_plus_id > 0">
								<template v-if="item.is_deleted == 0 && item.price > 0 && item.can_deleted">
									<u-icon style="margin-left: 20rpx;"
										name="close" size="26" color="#999999"
										@click="confirmDel(item.insure_plus_id)"></u-icon>
								</template>
							</template>
							<template v-else>
								<u-icon style="margin-left: 20rpx;" v-if="item.price > 0"
									name="close" size="26" color="#999999" @click="clearPrice(3, index)"></u-icon>
							</template>

						</template>
						<template v-else>
							<u-icon v-if="item.price > 0 && item.insure_plus_id == 0" style="margin-left: 20rpx;"
								name="close" size="26" color="#999999" @click="clearPrice(3, index)"></u-icon>
						</template>

					</view>
				</view>
				<view class="infor_item flex align-center justify-between" v-for="(v, k) in other_price" :key="k">
					<view class="infor_item_le_1">{{v.key}}</view>
					<view class="infor_item_ri_1">
						<!-- <text>
							<text style="font-size: 24rpx;">￥</text>
							<text>420</text>
						</text> -->
						<input v-model="v.value" style="flex: 1;font-size: 30rpx;text-align: right;" type="number"
							maxlength="10000">
						<u-icon @click="delOtherPrice(k)" style="margin-left: 20rpx;" name="close" size="26"
							color="#999999"></u-icon>
						<!-- <text class="item_text_edit" @tap="priceShow=true">改价</text> -->
					</view>
				</view>
				<view class="infor_item flex align-center justify-between" v-if="increment_money > 0">
					<view class="infor_item_le_1">增值服务费</view>
					<view class="infor_item_ri_1">
						<input v-model="increment_money" style="flex: 1;font-size: 30rpx;text-align: right;"
							type="number" :disabled="true" maxlength="10000">
						<u-icon style="margin-left: 20rpx;" name="close" size="26" color="#999999"
							@click="clearPrice(2)"></u-icon>
					</view>
				</view>
				<view class="add_price flex align-center justify-center" @tap="chargeShow=true">
					<image :src='STATIC_URL+"255.png"' mode="aspectFill"></image>
					<text>添加收费项</text>
				</view>
				<view class="add_increment flex align-center justify-center"
					v-if="incrementList.length > 0 && detailsInfo.status < 3" @tap="openIncrement">
					<image :src='STATIC_URL+"255.png"' mode="aspectFill"></image>
					<text>添加增值服务</text>
				</view>
				<!-- <view class="del_increment flex align-center justify-center" v-if="needDelIncrement" @tap.stop="confirmDel">
					<text>删除增值服务</text>
				</view> -->


			</view>
			<view class="content_bg" style="padding-bottom: 0;">
				<view class="content_title">总价</view>
				<view class="infor_item no_line flex align-center justify-between">
					<view class="infor_item_le_1">订单总价</view>
					<view class="infor_item_ri_1">
						<input v-model.lazy="order_money" :focus="totalMoneyFocus" style="font-size: 30rpx;text-align: right;" type="number" maxlength="100000" @blur="changeOrderMoney">
						<u-icon style="margin-left: 20rpx;" name="close" size="26" color="#999999"
							@click="clearPrice(1)"></u-icon>
					</view>
				</view>



			</view>

			<view class="page_fo flex align-center justify-between">
				<view class="page_fo_le flex">
					<!-- <text class="fo_le_1">还需支付：</text>
					<text>
						<text class="fo_le_2">￥</text>
						<text class="fo_le_3">{{totalPrice > 0 ? totalPrice : 0}}</text>
					</text> -->
				</view>
				<!-- <view class="page_fo_ri flex align-center justify-center" @tap.stop="pickerDiy1658997072074=true">收款</view> -->
				<view class="page_fo_ri flex align-center justify-center" @tap.stop="makeCollections">收款</view>
			</view>
		</template>

		<view style="height: 130rpx;"></view>
		<u-popup v-model="deductibleShow" mode="center" border-radius="32">
			<view class="deductible_popup">
				<view class="pop_title">不计免赔服务</view>
				<view class="pop_tips flex">
					<view class="tips_le"></view>
					<view class="tips_ri">本车车损8000元以下无需承担车辆维修的 赔偿责任</view>
				</view>
				<view class="pop_tips flex">
					<view class="tips_le"></view>
					<view class="tips_ri">本车车损8000元以上客户应支付相当于定损金额20%的贬值损失</view>
				</view>
				<view class="pop_tips flex">
					<view class="tips_le"></view>
					<view class="tips_ri">保险理赔范围内全部车损(包含轮胎损失)</view>
				</view>
				<view class="pop_btn flex align-center justify-center" @tap.stop="deductibleShow=false">好的</view>
				<view class="pop_bg"></view>
			</view>
		</u-popup>

		<u-popup v-model="chargeShow" mode="center" border-radius="32">
			<view class="deductible_popup">
				<view class="pop_title">收款类别</view>
				<view class="charge_list">
					<view class="charge_item flex align-center justify-center" v-for="(v, k) in collectionList" :key="k"
						@tap.stop="selectCollection(k)" :class="collectionIndex == k ? 'active_item' : ''">
						<image :src='STATIC_URL+"471.png"' mode="aspectFill" v-if="v.isSelect && collectionIndex == 3">
						</image>
						<text>{{v.name}}</text>
					</view>
				</view>
				<template v-if="collectionIndex == 3">
					<view class="title_text">新增类别</view>
					<view class="input_view">
						<input v-model="collection_name" class="input" type="text" placeholder="请输入收款类别"
							placeholder-style="font-size:32rpx;color:#999;">
					</view>
				</template>

				<view class="title_text">收款金额</view>
				<view class="input_view flex align-center">
					<text class="money_icon">￥</text>
					<input v-model.lazy="collection_price" style="padding: 0 30rpx 0 16rpx;" class="input" type="number"
						placeholder="请输入金额" placeholder-style="font-size:32rpx;color:#999;">
				</view>
				<view class="operation flex align-center justify-between">
					<view class="operation_1 flex align-center justify-center" @tap.stop="cancelCollection">取消</view>
					<view class="operation_2 flex align-center justify-center" @tap.stop="confirmCollection">确定</view>
				</view>
				<view class="pop_bg"></view>
			</view>
		</u-popup>

		<u-popup v-model="incrementShow" mode="center" border-radius="32">
			<view class="deductible_popup">
				<view class="pop_title">增值服务</view>
				<view class="charge_list">
					<view class="increment_item" v-for="(v, k) in incrementList" :key="k" @tap.stop="selectIncrement(k)"
						:class="incrementIndex == k ? 'active_item' : ''">
						<view class="">
							<text class="increment_item_price_icon">￥</text>
							<text>{{v.price}}</text>
						</view>
						<view class="increment_item_name">{{v.name}}</view>
					</view>
				</view>
				<view class="operation flex align-center justify-between">
					<view class="operation_1 flex align-center justify-center" @tap.stop="cancelCollection">取消</view>
					<view class="operation_2 flex align-center justify-center" @tap.stop="confirmIncrement">确定</view>
				</view>
				<view class="pop_bg"></view>
			</view>
		</u-popup>

		<u-popup v-model="priceShow" mode="center" border-radius="32">
			<view class="deductible_popup">
				<view class="pop_title">改价</view>
				<view class="input_view flex align-center" style="margin-top: 14rpx;">
					<text class="money_icon">￥</text>
					<input style="padding: 0 30rpx 0 16rpx;" class="input" type="number" placeholder="请输入金额"
						placeholder-style="font-size:32rpx;color:#999;">
				</view>
				<view class="operation flex align-center justify-between" style="margin: 94rpx 0 54rpx;">
					<view class="operation_1 flex align-center justify-center">取消</view>
					<view class="operation_2 flex align-center justify-center">确定</view>
				</view>
				<view class="pop_bg"></view>
			</view>
		</u-popup>

		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1658997072074" :label.sync='sexLable'
			:value.sync='sexValue' :options='sexType' mode='selector' :mask-show='true' :timeout='true'
			:picker-height='100' default-type='value' :default-props='{"label":"name","value":"value"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between personalInformation_picker2_0'>
					<view class="personalInformation_picker2_0_c1">收款方式</view>
					<u-icon @tap="$refs.benbenWritePickerCodepicker2.cancel()" name="close" color="#CCCCCC"></u-icon>
				</view>
			</template>
			<template #picker-footer>
				<view class="select_btn flex align-center justify-between">
					<view class="select_btn_1 flex align-center justify-center"
						@tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</view>
					<view class="select_btn_2 flex align-center justify-center"
						@tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</view>
				</view>
			</template>
		</benben-picker>
	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				pickerDiy1658997072074: false,
				checked: false,
				deductibleShow: false,
				chargeShow: false,
				incrementShow: false,
				priceShow: false,
				sexType: [{
					"name": "保密",
					"value": "0",
					"image": ""
				}, {
					"name": "男",
					"value": "1",
					"image": ""
				}, {
					"name": "女",
					"value": "2",
					"image": ""
				}],
				sexLable: "保密",
				sexValue: "0",
				order_id: "",
				upgrade_name: "",
				detailsInfo: {},
				other_price: [],
				isShow: true,
				collectionList: [{
						name: '车损费',
						isSelect: true,
						id: 0
					},
					{
						name: '违章费用',
						isSelect: false,
						id: 1
					},
					{
						name: '其他费用',
						isSelect: false,
						id: 2
					},
					{
						name: '新增类别',
						isSelect: false,
						id: 3
					}
				],
				collectionIndex: 0,
				collection_name: "",
				collection_price: "",
				totalPrice: 0,
				is_submit: false,
				unpay_money: 0,
				payMentList: [],
				old_order_money: 0,
				order_money: 0,
				incrementList: [],
				incrementIndex: -1,
				increment_id: "",
				increment_money: 0,
				needDelIncrement: "", // 需要删除的增值服务

				basic_expenses: [], // 基础服务费
				delete_price: [], // 要删除的其他费用
				
				totalMoneyFocus: false,
				dy_price: 0,  // 抖音团购券金额

			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				order_id,
				unpay_money
			} = options;
			if (order_id !== undefined) this.order_id = order_id;
			// if (unpay_money !== undefined) this.unpay_money = unpay_money;
			// this.totalPrice = this.unpay_money;

			// this.order_id = 9;
			this.getDetails();
			this.getOrderDetails();
			this.getIncrementList();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取订单详情  postOrderDetail
			getOrderDetails() {
				this.$api.post(global.apiUrls.postOrderDetail, {
					order_id: this.order_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.detailsInfo = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 收款  addOtherPrice
			makeCollections() {
				// if (this.other_price.length == 0 && this.unpay_money == 0) {
				// 	this.$message.info('请添加收费项');
				// 	return;
				// }
				if (this.is_submit) return;
				// if (!this.order_money) {
				// 	this.$message.info('请输入订单总价');
				// 	return;
				// }
				if (this.order_money < 0) {
					this.$message.info('请输入正确的订单总价');
					return;
				}
				let other_price = this.other_price.reduce((acc, obj) => {
					acc[obj.key] = Number(obj.value);
					return acc;
				}, {});
				let deleteItem = [];
				if (this.delete_price.length > 0) {
					this.delete_price.forEach((v, k) => {
						deleteItem.push({
							id: v.id,
							name: v.name,
							price: v.price
						})
					})
				}
				this.is_submit = true;
				this.$api.post(global.apiUrls.addOtherPrice, {
					version: 2,
					order_id: this.order_id,
					other_price: this.other_price.length > 0 ? JSON.stringify(other_price) : '',
					money: this.order_money,
					insure_id: this.increment_id ? this.increment_id : "",
					insure_price: this.increment_money ? this.increment_money : "",
					delete_price: deleteItem.length > 0 ? JSON.stringify(deleteItem) : "",
					// insurance_money: this.detailsInfo.insurance_money,
					// insure_plus_money: this.detailsInfo.insure_plus_money,
					// rent_money: this.detailsInfo.rent_money,
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.info(res.data.info);
						setTimeout(() => {
							if (res.data.data.unpay_money > 0) {
								uni.redirectTo({
									url: '/pages/order/payType?order_id=' + this.order_id +
										'&money=' + this.totalPrice
								})
							} else {
								uni.navigateBack();
							}
						}, 800)
					} else {
						this.is_submit = false;
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					this.is_submit = false;
				})

			},
			// 获取收银台详情  getOrderItems
			getDetails() {
				this.$api.post(global.apiUrls.getOrderItems, {
					order_id: this.order_id,
					version: 3
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.basic_expenses = res.data.data.items.main;
						this.payMentList = res.data.data.items.other;
						if (this.payMentList.length > 0) {
							this.payMentList.forEach((v, k) => {
								v.price = Number(v.price);
							})
						}
						// this.order_money = Number(res.data.data.money);
						this.old_order_money = Number(res.data.data.money);
						this.unpay_money = Number(res.data.data.unpay_money);
						// this.dy_price = Number(res.data.data.dy_price);
						this.countPrice();
					} else {
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 增值服务列表  postOrderIncrement
			getIncrementList() {
				this.$api.post(global.apiUrls.postOrderIncrement, {
					order_id: this.order_id
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.incrementList = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 删除增值服务  delIncrement
			confirmDel(id) {
				this.$api.post(global.apiUrls.delIncrement, {
					order_id: this.order_id,
					insure_id: id
				}).then(res => {
					// console.log(res);
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						this.getDetails();
						this.getIncrementList();
					}
				})
			},
			selectCollection(index) {
				this.collectionIndex = index;
				this.collectionList.forEach((v, k) => {
					v.isSelect = false;
				})
				this.collectionList[index].isSelect = !this.collectionList[index].isSelect;
				this.$forceUpdate();
			},
			cancelCollection() {
				this.collectionIndex = 0;
				this.collection_name = "";
				this.collection_price = "";
				this.chargeShow = false;
				this.incrementShow = false;
			},
			confirmCollection() {
				if (this.collectionIndex == 3) {
					if (!this.collection_name) {
						this.$message.info('请输入收款类别');
						return;
					}
				}
				if (!this.collection_price) {
					this.$message.info('请输入收款金额');
					return;
				}
				if (this.collection_price <= 0) {
					this.$message.info('收款金额必须大于0');
					return;
				}
				if (this.collectionIndex != 3) {
					this.other_price.push({
						key: this.collectionList[this.collectionIndex].name,
						value: this.collection_price
					})
				} else {
					this.other_price.push({
						key: this.collection_name,
						value: this.collection_price
					})
				}
				this.cancelCollection();
				this.countPrice();
			},
			delOtherPrice(index) {
				this.other_price.splice(index, 1);
				this.countPrice();
			},
			clearPrice(type, index) {
				if (type == 1) {
					this.order_money = '';
					this.totalMoneyFocus = true;
				} else if (type == 2) {
					this.increment_money = 0;
					this.increment_id = "";
					this.incrementIndex = -1;
					this.countPrice();
				} else if (type == 3) {
					// this.detailsInfo.insure_plus_money = 0;
					let item = this.payMentList[index];
					this.delete_price.push(item);
					this.payMentList.splice(index, 1);
					this.countPrice();
				}
			},
			openIncrement() {
				this.incrementShow = true;
			},
			// 选择增值服务
			selectIncrement(index) {
				this.incrementIndex = index;
			},
			confirmIncrement() {
				if (this.incrementIndex == -1) {
					this.$message.info('请选择增值服务');
					return;
				}
				if (this.incrementList[this.incrementIndex].id == this.increment_id) {
					this.$message.info('请选择其他增值服务');
					return;
				}
				this.increment_id = this.incrementList[this.incrementIndex].id;
				this.increment_money = this.incrementList[this.incrementIndex].price;
				this.incrementShow = false;
				this.countPrice();
			},
			changeOrderMoney() {

			},
			// 计算总金额
			countPrice() {
				let price = 0;
				if (this.other_price.length > 0) {
					this.other_price.forEach((v, k) => {
						price += Number(v.value);
					})
				}
				let payPrice = 0;
				if (this.payMentList.length > 0) {
					this.payMentList.forEach((v, k) => {
						price += Number(v.price);
					})
				}

				// this.totalPrice = price + this.unpay_money;
				// return;

				// if (this.order_money < 0) {
				// 	this.$message.info('订单总价必须大于0');
				// 	return;
				// }
				// if (this.order_money != this.old_order_money) {
				// 	this.totalPrice = (this.order_money - this.old_order_money) + this.unpay_money + payPrice + price + this.increment_money;
				// } else {
				// 	this.totalPrice = this.unpay_money + payPrice + price + this.increment_money;
				// }
				// this.totalPrice = this.unpay_money + payPrice + price + this.increment_money;
				// this.totalPrice = this.unpay_money + payPrice + price + this.increment_money;
				let basic_price = 0;
				this.basic_expenses.forEach((v, k) => {
					basic_price += Number(v.price);
				})
				this.order_money = basic_price + payPrice + price + this.increment_money;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}

	.select_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}

	.select_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}

	.select_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}



	.deductible_popup {
		width: 626rpx;
		position: relative;

		.pop_title {
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
			color: #222222;
			padding: 40rpx 0 12rpx;
		}

		.pop_tips {
			padding: 0 38rpx;
			margin-top: 16rpx;

			.tips_le {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: #1A66FA;
				margin-right: 16rpx;
				transform: translateY(16rpx);
			}

			.tips_ri {
				width: calc(100% - 24rpx);
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				line-height: 36rpx;
			}
		}

		.pop_btn {
			width: 548rpx;
			height: 88rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 66rpx auto 52rpx;
		}

		.pop_bg {
			width: 100%;
			height: 220rpx;
			background: linear-gradient(180deg, rgba(26, 102, 250, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 32rpx 32rpx 0px 0px;
			position: absolute;
			top: 0;
			left: 0;
		}

		.title_text {
			padding: 36rpx 40rpx 22rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}

		.input_view {
			width: 548rpx;
			height: 88rpx;
			border-radius: 16rpx;
			border: 2rpx solid #1A66FA;
			padding: 24rpx 0rpx;
			margin: 0 40rpx;

			.input {
				padding: 0 30rpx;
			}

			.money_icon {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A66FA;
				margin-left: 30rpx;
			}
		}

		.operation {
			margin: 46rpx 0;
			padding: 0 40rpx;

			.operation_1 {
				width: 266rpx;
				height: 88rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
			}

			.operation_2 {
				width: 266rpx;
				height: 88rpx;
				background: #1A66FA;
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #fff;
			}
		}

		.charge_list {
			overflow: hidden;
			padding: 10rpx 40rpx 0;
			position: relative;
			z-index: 10;

			.charge_item {
				float: left;
				width: 174rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}
			}

			.increment_item {
				float: left;
				width: 174rpx;
				height: 100rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 10rpx;
				margin-right: 10rpx;
				text-align: center;
				padding-top: 12rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}

				.increment_item_price_icon {
					font-size: 24rpx;
				}

				.increment_item_name {
					font-size: 26rpx;
				}
			}

			.increment_item:nth-child(3n+3) {
				margin-right: 0;
			}

			.active_item {
				color: #1A66FA !important;
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
			}

			.charge_item:nth-child(3n+3) {
				margin-right: 0;
			}
		}
	}

	.page_fo {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 10rpx 24rpx 14rpx;

		.page_fo_le {
			padding-left: 24rpx;

			.fo_le_1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.fo_le_2 {
				font-size: 24rpx;
				font-weight: bold;
				color: #FF532E;
			}

			.fo_le_3 {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF532E;
			}
		}

		.page_fo_ri {
			width: 408rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}

	.content_bg {
		background: #fff;
		border-radius: 16rpx;
		margin: 16rpx 24rpx 0;
		padding: 0 24rpx 20rpx;
	}

	.content_title {
		font-weight: bold;
		padding: 28rpx 0;
		border-bottom: 1px solid #eee;
		font-size: 30rpx;
	}

	.add_price {
		background: #F0F5FF;
		border-radius: 16rpx;
		border: 2rpx solid #A5BAE4;
		padding: 26rpx 0;
		margin-top: 24rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #1A66FA;

		image {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.add_increment {
		flex: 1;
		background: #F0F5FF;
		border-radius: 16rpx;
		border: 2rpx solid #A5BAE4;
		padding: 26rpx 0;
		margin-top: 24rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #1A66FA;

		image {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.del_increment {
		flex: 1;
		padding: 26rpx 0;
		border: 2rpx solid #FF532E;
		background: #FF532E;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
		margin-top: 24rpx;
	}

	.infor_item {
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;

		.infor_item_le {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.infor_item_le_1 {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			flex: 7;
		}

		.infor_item_ri {
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
		}

		.infor_item_ri_1 {
			flex: 3;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			display: flex;
			align-items: center;
			input {
				padding-right: 0;
			}
		}

		.infor_item_ri_2 {
			font-weight: 400;
			font-size: 30rpx;
			color: #1A66FA;
		}

		.infor_item_ri_3 {
			font-weight: bold;
			font-size: 30rpx;
			color: #FF532E;
		}

		.infor_item_ri_4 {
			font-weight: 400;
			font-size: 30rpx;
			color: #222222;
		}

		.infor_item_icon {
			width: 38rpx;
			height: 38rpx;
			margin-left: 10rpx;
		}

		.coupon_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 12rpx;
		}

		.item_text_edit {
			font-weight: 400;
			font-size: 28rpx;
			color: #1A66FA;
			margin-left: 14rpx;
		}
	}

	.no_line {
		border-bottom: 0;
	}

	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 100rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.personalInformation_picker2_0_c2 {
		color: rgba(44, 143, 255, 1);
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat #f6f7fb;
		background-size: 100% auto !important;
	}
</style>